﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tic Tac Toe</title>
    <link rel="stylesheet" href="styles/index.css">
    <link rel="stylesheet" href="styles/overlays.css">
    <link rel="stylesheet" href="styles/configuration.css">
    <link rel="stylesheet" href="styles/game.css">
    <script src="scripts/config.js" defer></script>
    <script src="scripts/game.js" defer></script>
    <script src="scripts/app.js" defer></script>
</head>
<body>
<div id="backdrop"></div>
<header id="main-header">
    <h1>Play Tic,Tac,Toe</h1>
    <p>Built with HTML,CSS,JavaScript and - of course - lots of love!</p>
</header>
<main>
    <aside class="model" id="config-overlay">
        <h2>Choose your name</h2>
        <form>
            <div class="form-control">
                <label for="playername">Player Name</label>
                <input type="text" name="playername" id="playername" required>
            </div>
            <p id="config-errors"></p>
            <div>
                <button type="reset" class="btn btn-alt" id="cancel-config-btn">Cancel</button>
                <button type="submit" class="btn">Confirm</button>
            </div>
        </form>
    </aside>
    <section id="game-configuration">
        <ol>
            <li>
                <article id="player-1-data">
                    <h2>Player 1</h2>
                    <h3>PLAYER NAME</h3>
                    <p class="player-symbol">X</p>
                    <button class="btn btn-alt" id="edit-player-1-btn" data-playerid="1">Edit</button>
                </article>
            </li>
            <li>
                <article id="player-2-data">
                    <h2>Player 2</h2>
                    <h3>PLAYER NAME</h3>
                    <p class="player-symbol">O</p>
                    <button class="btn btn-alt" id="edit-player-2-btn" data-playerid="2">Edit</button>
                </article>
            </li>
        </ol>
        <button class="btn" id="start-game-btn">Start New Game</button>
    </section>

    <section id="active-game">
        <article id="game-over">
            <h3>You Won,<span id="winner-name">PLAYER NAME</span>!</h3>
            <p>Click "Start New Game" above,to start a new game!</p>
        </article>
        <p>It's your turn <span id="active-player-name">PLAYER NAME</span>!</p>
        <ol id="game-board">
            <li data-col="1" data-row="1"></li>
            <li data-col="2" data-row="1"></li>
            <li data-col="3" data-row="1"></li>
            
            <li data-col="1" data-row="2"></li>
            <li data-col="2" data-row="2"></li>
            <li data-col="3" data-row="2"></li>

            <li data-col="1" data-row="3"></li>
            <li data-col="2" data-row="3"></li>
            <li data-col="3" data-row="3"></li>
        </ol>
    </section>
</main>

</body>
</html>